<template>
  <div>
    <!--工具栏-->
    <div class="toolbar">
      
    </div>


    <div class="block-container">
        
      <div class="block-content styleRest">
          <div class="inner-common">
              <p class="title">订单成交量
                  <el-tooltip class="item" effect="dark" content="活动店铺中参加活动的用户成交订单量" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart1"></div>
          </div>
          <div class="inner-common">
              <p class="title">成交用户量
                  <el-tooltip class="item" effect="dark" content="活动中成交的用户数量" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart2"></div>
          </div>
      </div>

      <div class="block-content styleRest">
          <div class="inner-common"  v-if="radio==1">
              <p class="title">店铺流量（PV）
                  <el-tooltip class="item" effect="dark" content="活动店铺的用户访问量" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart3"></div>
          </div>
          <div class="inner-common" v-if="radio==2">
              <p class="title">商品详情页（PV）
                  <el-tooltip class="item" effect="dark" content="活动商品详情页的用户访问量" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart4"></div>
          </div>
          <div class="inner-common" v-if="radio==3">
              <p class="title">PV
                  <el-tooltip class="item" effect="dark" content="用户访问量" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart5"></div>
          </div>
          <div class="inner-common" v-if="radio==1">
              <p class="title">活动商品成交金额 
                  <el-tooltip class="item" effect="dark" content="参与活动的商品成交金额" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart6"></div>
          </div>
          <div class="inner-common" v-if="radio==2 || radio==3">
              <p class="title">订单成交金额
                  <el-tooltip class="item" effect="dark" content="活动店铺中成交订单的总金额" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart7"></div>
          </div>
      </div>

      <div class="block-content styleRest">
          <div class="inner-common" v-if="radio==1">
              <p class="title">活动商品的毛利
                  <el-tooltip class="item" effect="dark" content="活动商品的毛利" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart8"></div>
          </div>
          <div class="inner-common" v-if="radio==2||radio==3">
              <p class="title">毛利
                  <el-tooltip class="item" effect="dark" content="活动商铺赚取的毛利润" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
              <div class="block-item-4" id="chart9"></div>
          </div>
          <div class="inner-common" v-if="radio==1">
              <p class="title">活动商品成交转化率
                  <el-tooltip class="item" effect="dark" content="活动商品从商详页到成交的转化率" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart10"></div>
          </div>
          <div class="inner-common" v-if="radio==2">
              <p class="title">非活动商品成交额
                  <el-tooltip class="item" effect="dark" content="活动用户在活动店铺购买的非活动商品的成交额" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart11"></div>
          </div>
          <div class="inner-common" v-if="radio==3">
              <p class="title">成交转化率
                  <el-tooltip class="item" effect="dark" content="锁定活动用户，比较这批用户在活动前、中、后的整体转化率" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart12"></div>
          </div>
      </div>

      <div class="block-content styleRest">
          <div class="inner-common" style="width:98%">
              <p class="title">活动对比
                  <el-tooltip class="item" effect="dark" content="当前活动和其他活动效果综合对比" placement="right-start">
                    <i class="el-icon-question"></i>
                  </el-tooltip>
              </p>
               <div class="block-item-4" id="chart13"></div>
          </div>
      </div>
      <div class="el-drawer-container">
          <el-drawer title="切换报表分析" :visible.sync="tabSwitch" direction="rtl" size="10%">
                <p class="inner-container">
                    <el-radio v-model="radio" label="1" border @change="radioChange">活动商品引流效果</el-radio>
                    <span class="title">活动商品对店铺内其他商品的销售带动作用。展示活动用户在活动店铺的整体消费</span>
                </p>
                <p class="inner-container">
                    <el-radio v-model="radio" label="2" border @change="radioChange">活动商品促销效果</el-radio>
                    <span class="title">展示活动商品在活动前、中、后的销量、流量等数据对比</span>
                </p>
                <p class="inner-container">
                    <el-radio v-model="radio" label="3" border @change="radioChange">活动用户价值提升</el-radio>
                    <span class="title">展示活动用户在整个平台的整体消费提升，分活动前、中、后对比</span>
                </p>
          </el-drawer>
      </div>
    </div>

    <!-- 右侧悬浮框部分 -->
    <div class="right_fbox" @click="showDrawer">
        <i class="el-icon-s-fold"></i>
        <span>点击切换</span>
    </div>
  </div>
</template>

<script>
  import PopupTreeInput from "@/components/PopupTreeInput";
  import CyTable from "@/views/Core/CyTable";
  import KtButton from "@/views/Core/KtButton";
  import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
  import { format } from "@/utils/datetime";
  import utils from "@/assets/js/utils.js";
  let echarts = require("echarts/lib/echarts");
  var symbolSize = 20;
  export default {
    components: {
      PopupTreeInput,
      CyTable,
      KtButton,
      TableColumnFilterDialog
    },
    data() {
      return {
        budget2012List: [
            0,
            1000,
            2000,
            2000,
            2000,
            3000,
            4000
        ],
        budget2011List: [
            500,
            1000,
            2000,
            2000,
            4000,
            1000,
            1000
        ],
        budget2012List4: [
            0,
            1800,
            1000,
            1000,
            0,
            3000,
            8000
        ],
        budget2011List5: [
            100,
            2800,
            1000,
            3000,
            555,
            3000,
            5000
        ],
        budget2011List6: [
            1999,
            2800,
            3000,
            29000,
            3555,
            2000,
            3400
        ],
        budget2011List7: [
            2200,
            2800,
            2000,
            3000,
            2555,
            2000,
            1000
        ],
        budget2011List8: [
            1000,
            4800,
            1500,
            3000,
            5555,
            3050,
            3000
        ],
        budget2011List9: [
            200,
            2830,
            3000,
            2000,
            5255,
            4000,
            4500
        ],
        budget2011List10: [
            1800,
            2800,
            1090,
            2500,
            555,
            1450,
            5999
        ],
        budget2011List11: [
            1001,
            1800,
            4000,
            3000,
            2555,
            5000,
            4500
        ],
        budget2011List12: [
            100,
            8845,
            466,
            123,
            3333,
            2000,
            1000
        ],
        delta: [
            null,
            0,
            0,
            0,
            -50,
            null,
            0
        ],
        names: [
            "2019-12-26",
            "2019-12-27",
            "2019-12-28",
            "2019-12-29",
            "2019-12-30",
            "2019-12-31",
            "2020-01-01"
        ],
        tabSwitch:false,
        promotionShow:1,
        radio:1,
      }
    },
    methods: {
        drawLine(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart1'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow',
                        label: {
                            show: true
                        }
                    }
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                legend: {
                    data:['Growth', '成交金额XXXXXXX'],
                    itemGap: 5
                },
                grid: {
                    top: '12%',
                    left: '2%',
                    right: '10%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type : 'category',
                        data : this.names
                    }
                ],
                yAxis: [
                    {
                        type : 'value',
                        name : '订单成交量',
                        axisLabel: {
                            formatter: function (a) {
                                a = +a;
                                return isFinite(a)
                                    ? echarts.format.addCommas(+a / 1000)
                                    : '';
                            }
                        }
                    }
                ],
                dataZoom: [
                    {
                        show: false,
                        start: 1,
                        end: 100
                    },
                    {
                        type: 'inside',
                        start: 1,
                        end: 100
                    },
                    {
                        show: false,
                        yAxisIndex: 0,
                        filterMode: 'empty',
                        width: 30,
                        height: '80%',
                        showDataShadow: false,
                        left: '93%'
                    }
                ],
                series : [
                    {
                        name: '订单成交量',
                        type: 'line',
                        data: this.budget2011List
                    }
                ]
            });
        },
        drawLine2(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart2'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '成交用户量'
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType: {show: true, type: ['line', 'bar']},
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {
                    data: ['新客户', '老客户']
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                yAxis: {
                    type: 'category',
                    data: ['活动前','活动中','活动后']
                },
                series: [
                    {
                        name: '新客户',
                        type: 'line',
                        data: [18203, 23489, 29034]
                    },
                    {
                        name: '老客户',
                        type: 'line',
                        data: [19325, 23438, 31000]
                    }
                ]
            });
        },
        drawLine3(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart3'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '店铺流量'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '店铺流量',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '店铺流量',
                    type: 'line',
                    data: this.budget2012List
                }
            ]
            });
        },
        drawLine4(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart4'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '商品详情页'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '商品详情页',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '商品详情页',
                    type: 'line',
                    data: this.budget2012List4
                }
            ]
            });
        },
        drawLine5(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart5'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '用户访问量'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '用户访问量',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '用户访问量',
                    type: 'line',
                    data: this.budget2011List5
                }
            ]
            });
        },
        drawLine6(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart6'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '活动商品成交金额'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '5%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '活动商品成交金额',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '活动商品成交金额',
                    type: 'line',
                    data: this.budget2011List6
                }
            ]
            });
        },
        drawLine7(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart7'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '成交金额'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '成交金额',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '成交金额',
                    type: 'line',
                    data: this.budget2011List7
                }
            ]
            });
        },
        drawLine8(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart8'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '活动商品的毛利'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '5%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '活动商品的毛利',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '活动商品的毛利',
                    type: 'line',
                    data: this.budget2011List8
                }
            ]
            });
        },
        drawLine9(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart9'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '毛利'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '毛利',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '毛利',
                    type: 'line',
                    data: this.budget2011List9
                }
            ]
            });
        },
        drawLine10(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart10'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '活动商品成交转化率'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '5%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '活动商品成交转化率',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '活动商品成交转化率',
                    type: 'line',
                    data: this.budget2011List10
                }
            ]
            });
        },
        drawLine11(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart11'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '非活动商品成交额'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '5%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '非活动商品成交额',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '非活动商品成交额',
                    type: 'line',
                    data: this.budget2011List11
                }
            ]
            });
        },
        drawLine12(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart12'))
            // 绘制图表
            myChart.setOption({
                tooltip : {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        show: true
                    }
                }
            },
            toolbox: {
                show : true,
                feature : {
                    mark : {show: true},
                    dataView : {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore : {show: true},
                    saveAsImage : {show: true}
                }
            },
            calculable : true,
            legend: {
                data:['Growth', '成交转化率'],
                itemGap: 5
            },
            grid: {
                top: '12%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
            xAxis: [
                {
                    type : 'category',
                    data : this.names
                }
            ],
            yAxis: [
                {
                    type : 'value',
                    name : '成交转化率',
                    axisLabel: {
                        formatter: function (a) {
                            a = +a;
                            return isFinite(a)
                                ? echarts.format.addCommas(+a / 1000)
                                : '';
                        }
                    }
                }
            ],
            series : [
                {
                    name: '成交转化率',
                    type: 'line',
                    data: this.budget2011List12
                }
            ]
            });
        },
        radar(){
            // 基于准备好的dom，初始化echarts实例
            let myChart = this.$echarts.init(document.getElementById('chart13'))
            // 绘制图表
            myChart.setOption({
                title: {
                    text: '活动对比图'
                },
                tooltip: {},
                
            grid: {
                top: '55%',
                left: '2%',
                right: '10%',
                containLabel: true
            },
                legend: {
                    data: ['测试活动', '超值促销001']
                },
                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 3,
                            padding: [3, 5]
                    }
                    },
                    indicator: [
                    { name: '活动商品成交金额', max: 6500},
                    { name: '订单成交量', max: 16000},
                    { name: '非活动商品成交金额', max: 30000},
                    { name: '店铺流量（PV）', max: 38000},
                    { name: '毛利', max: 52000},
                    { name: '非活动商品成交金额', max: 25000}
                    ]
                },
                series: [{
                    name: '测试活动 vs 超值促销001',
                    type: 'radar',
                    // areaStyle: {normal: {}},
                    data : [
                        {
                            value : [4300, 10000, 28000, 35000, 50000, 19000],
                            name : '测试活动'
                        },
                        {
                            value : [5000, 14000, 28000, 31000, 42000, 21000],
                            name : '超值促销001'
                        }
                    ]
                }]
            });
        },
        showDrawer(){
            this.tabSwitch = true;
        },
        radioChange(){
            if(this.radio==2){
                this.drawLine4();
                this.drawLine11();
                this.drawLine7();
                this.drawLine9();
            }else if(this.radio==3){
                this.drawLine5();
                this.drawLine12();
                this.drawLine7();
                this.drawLine9();
            }
        },
        handleClose(done) {
            
        
        
        
        },
    },
    mounted() {
        this.radar();
        this.drawLine();
        this.drawLine2();
        this.drawLine3();
        this.drawLine6();
        this.drawLine8();
        this.drawLine10();
    }
  }
</script>

<style scoped>
  /*#chart1 {*/
    /*width: 300px;*/
    /*height: 300px;*/
  /*}*/
  .change {
    /*display:inline-block;*/
    /*text-align:left;*/
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }

  .changs {
    /*display:inline-block;*/
    /*text-align:left;*/
    border: 1px solid #a6d9ff;
    /*background-color: #FFFFFF;*/
    /*margin: 10px;*/
  }



  .block-container {

    height: 1840px;
    /*width: 100%;*/
    background-color:#F0F3F4;
  }

  .block-title {
    text-align: center;
  }

  /* 父元素 */
  .block-content {
    font-size: 0;  /* 解决 inline-block 布局会出现多余间隙 */
    /*max-width: 1200px;*/
    margin: 0 auto;
  }

  .block-content .block-item-3,
  .block-content .block-item-4,
  .block-content .block-item-5,
  .block-content .block-item-6{
    display: inline-block;
    box-sizing: border-box;
    position: relative;
    transition: all .4s ease;
    vertical-align: top; /* 设置顶部对齐 */
    font-size: 14px;
  }

  /* 3 列 */
  .block-content .block-item-3 {
    /*width: 45%;  !*  width: 32%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 4 列 */
  .block-content .block-item-4 {
    /*width: 22%;   !* width: 23.5%; *!*/
    /*margin: 10px;  !*  margin-left: 2%;  *!*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 5 列 */
  .block-content .block-item-5 {
    /*width: 18%;*/
    /*margin: 10px;*/
    /*margin-left: 2.5%;*/
    /*border: 1px solid #333;*/
    background: #ffffff;
    text-align: center;
    height: 350px;
    width: 48%;
    margin-top: 20px;
    margin-left: 2%;
    cursor: pointer;
  }

  /* 6 列 */
  .block-content .block-item-6 {
    /*margin: 10px;*/
    background: #ffffff;
    text-align: center;
    height: 450px;
    width: 98%;
    margin-top: 20px;
    margin-left: 2%;
    margin-bottom: 30px;
    cursor: pointer;
  }

  /* 首列左边距设为0 */
  .block-content .block-item-3:first-child,
  .block-content .block-item-4:first-child,
  .block-content .block-item-5:first-child,
  .block-content .block-item-6:first-child {
    margin-left: 0;
  }

  /* 表格样式重置 */
  .block-content.styleRest {
      width: 100%;
      padding: 0 20px;
      height: auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20px;
  }
  .inner-common {
        width: 48%;
        padding: 20px;
        box-sizing: border-box;
        background-color: #fff;
    }
    .inner-common .title {
        color: #959ab3;
        width: 100%;
        height: 20px;
        line-height: 20px;
        font-size: 14px;
        font-weight: 600;
    }
    .inner-common .block-item-4 {
        width: 100%;
    }
    .inner-common:last-child {
        margin-right: 40px;
    }

    .right_fbox {
        width: 23px;
        height: auto;
        position: fixed;
        right: 0;
        top: 50%;
        z-index: 999;
        background: #1976d2;
        padding: 30px 10px;
        letter-spacing: 4;
        font-size: 16px;
        color: #fff;
        border-radius: 5px 0 0 5px;
        cursor: pointer;
    }
    /*  右侧悬浮框样式重构  */
    .el-drawer-container {
        padding: 20px 10px;
        font-size: 14px;
    }
    .inner-container {
        padding: 10px;
    }
    .title {
        display: block;
        margin-top:  10px;
        text-align: left;
        letter-spacing: 1.5;
    }
</style>